import Vue from 'vue'
import VueRouter from 'vue-router'
import { Message } from "element-ui";
 import store from "@/store"

// 引入路由组件
import Home from '@/views/Home'
import Search from '@/views/Search'
import Detail from '@/views/Detail'
import Login from '@/views/Login'
import Register from '@/views/Register'
import Trade from "@/views/Trade";
import Pay from "@/views/Pay";
import PaySuccess from "@/views/PaySuccess";
import Center from "@/views/Center";
import AddCartSuccess from '@/views/AddCartSuccess'
import ShopCart from '@/views/ShopCart'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home,
      // meta: {0
      //   isShowFooter: true,
      // },
    },
    {
      path: '/search',
      name: 'Search',
      component: Search,
      // meta: {
      //   isShowFooter: true,
      // },
    },
    {
      path: "/trade",
      name: "Trade",
      component: Trade,
    },
    {
      path: "/pay",
      name: "Pay",
      component: Pay,
    },
    {
      path: "/paysuccess",
      name: "PaySuccess",
      component: PaySuccess,
    },
    {
      path: "/center",
      name: "Center",
      component: Center,
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail,
    },
    {
      path: "/addcart_success",
      name: "AddCartSuccess",
      component: AddCartSuccess,
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
      meta: {
        isHiddenFooter: true,
      },
    },
    // 购物车
    {
      path: "/shopcart",
      name: "ShopCart",
      component: ShopCart,
    },
    {
      path: '/register',
      name: 'Register',
      component: Register,
      meta: {
        isHiddenFooter: true,
      },
    },
    {
      path: '/',
      redirect: '/home',
    },
  ],
  // 每次路由跳转触发函数
  scrollBehavior() {
    return {
      x: 0,
      y: 0,
    }
  },
});

// 设置路由导航守卫
/*
  路由导航守卫：当路由跳转时触发的钩子函数
    1. 全局导航守卫（对所有路由生效）
      beforeEach
      beforeResolve
      afterEach
    2. 路由导航守卫（只对当前路由生效）
    3. 组件导航守卫（只对当前组件生效）

*/
const authList = ["/center", "/trade", "/pay", "/paysuccess","/shopcart"];

// 全局前置导航守卫
router.beforeEach((to, from, next) => {
  /*
    A --> B

    to代表B
    from代表A

    next 开始下一步（进行路由跳转）
      next() 相当于 next(to)，跳转到to对应路由地址
      next('/login') 或 next({ name: 'Login' })，跳转到/login
  */
  // console.log(to, from, next);
  // if (to.path === "/login") {
  //   next();
  //   return;
  // }
  // next("/login");
  /*
    需求：
      希望登录后才能访问 /center /trade /pay /paysuccess
      访问其他页面可以不用登录
    分析；

  */
    const token = store.state.user.token;

    // if (token) {
    //   if (to.path === "/login") {
    //     next("/");
    //   } else {
    //     next();
    //   }
    // } else {
    //   // 没有登录
    //   if (authList.includes(to.path)) {
    //     Message.error("请先登录，在访问");
    //     next(`/login?redirect=${to.path}`);
    //   } else {
    //     next();
    //   }
    // }
    if (authList.includes(to.path) && !token) {
      // 如果访问authList地址，并且没有登录，就不能访问，要去登录
      Message.error("请先登录，在访问");
      next(`/login`);
    } else {
      next();
    }
});

// 全局后置导航守卫
// router.afterEach((to, from) => {
//   console.log(to, from);
// });

export default router